<template>
  <div class="ele-car">
    <transition name="modify">
      <div
        class="ele-shop-menu"
        v-if="isShow"
        :class="[isShow ? 'ele-modify' : '']"
     @click="isOpen" ></div>
    </transition>
    <div class="ele-shop-car" v-show="true">
      <div class="shop-car-bottom" @click="isOpen">
        <div class="car-bg">
          <div class="car">
            <span
              class="eleelemo-waimai-canyin iconfont "
              :class="[MoneyCompute != 0 ? 'car-light' : 'car-icon']"
            ></span>
          </div>
          <div class="car-money">￥ {{ MoneyCompute }}</div>
          <div class="line"></div>
          <div class="car-info">
            另需配送费 ￥ {{ seller.deliveryPrice }} 元
          </div>
          <div
            class="car-min-money"
            @click="Pay"
            :class="[IsPay ? 'Pay-state' : 'not-enough']"
          >
            <span class="toMoney" v-if="!IsPay">
              还差 {{ ToMoney }} 元起送</span
            >
            <span class="goPay" v-else> 去结算</span>
          </div>
        </div>
      </div>
      <!-- 购物车 列表 -->
      <transition name="menu">
        <div class="shop-menu" v-if="isShow">
          <div class="car-title">
            <h1>
              <span>购物车</span>
              <span id="clear" @click.stop="handlerClear">清空</span>
            </h1>
          </div>
          <!-- 购物车菜单栏 -->
          <ele-scroll class="car-content" :goods="model">
            <car-content v-for="value in model" :food="value" :key="keys()" />
          </ele-scroll>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import { _InitScroll } from "@/common/js/better-scroll";
// vuex
import { mapGetters,mapActions } from "vuex";
// 展开添加列表
import carContent from "./menu";
// betterScroll 组件
import eleScroll from "./scroll";
export default {
  name: "shopCar",
  props: {
    seller: {
      default: () => {},
      type: Object,
    },
  },
  data() {
    return {
      isShow: false,
      // betterScroll 实例
      BsApp: {}
    };
  },
  methods: {
    ...mapActions(["clearOrderList"]),
    // 支付
    Pay(e) {
      e.stopPropagation();
        this.IsPay?(alert(this.MoneyCompute+this.seller.deliveryPrice)):""
    },
    // 清除数据
    handlerClear() {
        this.clearOrderList()
    },
    // 打开状态
    isOpen() {
      this.isShow = !this.isShow;
    },
    // key
    keys() {
      return Math.random() + new Date().getTime().toString().slice(0,-4);
    },
  },
  computed: {
    ...mapGetters(["getOrderList"]),
    // 外卖列表
    model() {
      return this.getOrderList;
    },
    // money计算
    MoneyCompute() {
      return this.getOrderList.reduce((pre, value) => {
        return pre + value.price;
      }, 0);
    },
    // 差多少钱
    ToMoney() {
      let _res = this.seller.minPrice - this.MoneyCompute;
      return _res > 0 ? _res : this.MoneyCompute;
    },
    // 支付条件
    IsPay() {
      return this.seller.minPrice < this.MoneyCompute;
    },
  },

  components: {
    // 购物车内容
    carContent,
    // betterSCroll组件
    eleScroll,
  },
};
</script>

<style scoped>
.ele-shop-car {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1;
}
.ele-modify {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
  background: rgba(7, 17, 27, 0.6);
}
.shop-car-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 1000;
}
.car-bg {
  /* position: fixed; */
  display: flex;
  width: 100%;
  padding: 12px 0;
  background-color: #141d27;
}
.car-bg .car {
  position: absolute;
  bottom: 0;
  left: 18px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 5px solid #141d27;
  background-color: #2b343c;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.car-icon {
  font-size: 25px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 24px;
}
.car-light {
  color: #00a0dc;
  line-height: 24px;
  font-size: 25px;
}
.car-money {
  padding-left: 80px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 16px;
  font-weight: 700px;
  line-height: 24px;
  position: relative;
}
.line {
  width: 1px;
  margin: 0 12px;
  background-color: rgba(255, 255, 255, 0.1);
}
.car-info {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 700;
  line-height: 24px;
}

.car-min-money {
  padding: 0 8px;
  width: 105px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 12px;
  font-weight: 700;

  display: flex;
  justify-content: center;
  align-items: center;
}
.Pay-state {
  background-color: #00a0dc;
  color: white;
}
.not-enough {
  background-color: #2b333b;
  color: rgba(255, 255, 255, 0.4);
}
.shop-menu {
  position: absolute;
  bottom: 48px;
  width: 100%;
  z-index: 998;
  background-color: white;
}
.car-content {
  max-height: 50vh;
  overflow: hidden;
}
.car-title {
  background-color: #f3f5f7;
}
.car-title h1 {
  padding: 0 18px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: rgb(7, 17, 27);
}
#clear {
  float: right;
  display: inline-block;
  color: #e28089;
  cursor: pointer;
  font-size: 12px;
  line-height: 40px;
}

@media screen and (max-width: 400px) {
  .car-info {
    display: none;
  }
}

.modify-enter-active,
.modify-leave-active {
  transition: all 0.1s linear;
}
.modify-enter,
.modify-leave-to {
  opacity: 0;
}

.menu-enter-active,
.menu-leave-active {
  transition: all 0.2s linear;
}
.menu-enter,
.menu-leave-to {
  transform: translateY(100%);
}
</style>
